<template>
  <el-table :data="tableData" :stripe="stripe" :border="border" :fit="fit">
    <!-- 自定义表格列 -->
    <template v-for="item in columns" :key="item.prop">
      <el-table-column :label="item.label" :prop="item.prop">
        <template #default="{ row }">
          {{ item.render ? item.render(row) : row[item.prop] }}
        </template>
      </el-table-column>

    </template>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button @click="editRow(row.id)" type="success">修改</el-button>
        <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
import { getRoleInfoApi } from '../../api/auth'
defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  stripe: {
    type: Boolean,
    default: false,
  },
  border: {
    type: Boolean,
    default: false,
  },
  fit: {
    type: Boolean,
    default: true,
  },
  columns: {
    type: Array,
    default: () => [],
  },
})
const emit = defineEmits(["changeState"]);
const editRow = async (id) => {
  let res = await getRoleInfoApi(id)
  const roleInfo = JSON.stringify(res.data)
  localStorage.setItem('ROLEINFO', roleInfo)
  emit("changeState", res.data);
}
</script>